<script lang="ts" setup>
import { useList } from '@/use/useList'
import { useItem } from '@/use/useItem'

const { list, deleteItem } = useList()
const { currentIndex, handleItemClick } = useItem()

</script>

<template>
  <div>
    <p id="no-item" v-if="list.length === 0">暂无数据。</p>
    <div id="items" v-else>
      <div class="read-item" v-for="li, i in list" @click.self="handleItemClick(i, li.url)"
        :class="{ selected: currentIndex === i }">
        <img :src="li.screenshot" :alt="li.title">
        <h2>{{ li.title }}</h2>
        <button @click="deleteItem(li.id)"> x </button>
      </div>
    </div>
  </div>
</template>

<style lang="stylus">
#no-item
  font-weight bold
  color silver
  text-align center
  width 100%
  position absolute
  top 100px
  z-index -1

#items
  .read-item
    display flex
    align-items center
    align-content center
    border-bottom lightgray 2px solid
    background #fafafa
    border-left 10px solid lightgray
    -webkit-user-select none
    position relative
    padding 10px
    img
      width 20%
      margin-right 25px
      border solid 1px #ccc
    &:hover
      background #eee
    &:hover button
      display inline-block
    &.selected
      border-left-color dodgerblue
    button
      position absolute
      display none
      right 10px
      top 10px
      width 30px
      height 30px
      background #f44336
      border none
      border-radius 50%
      color white
      text-align center
      font-size 16px
      cursor pointer
</style>